\section{使用样式表的三种方式} % (fold)
\label{sec:使用样式表的三种方式}

为网页添加CSS样式表的方式主要有三种，分别是：外部样式表、内部样式表和内嵌样式表。最好使用外部样式表，因为外部样式表更加符合Web标准所主张的内容和表现相分离思想。

\subsection{外部样式表} % (fold)
\label{sub:外部样式表}
外部样式表使用link元素将独立的样式表文件与网页连接起来，这样创作人员就可以用一个样式表文件为多个html文件指定样式，大大提高工作效率。link元素必须放在HTML文档的head元素里面。就像这样：

\begin{lstlisting}
<head>
<link href="global_v1.5.1.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
\end{lstlisting}

这行代码的意思就是以global\_v1.5.1.css文件作为HTML文档的CSS来源，我们将这种CSS文档称为外部样式表。

link元素有这样几个属性：href用来指定外部样式表存放的地址，rel描述的是HTML文件和它相连的文件之间的关系，如上例中就表示global\_v1.5.1.css是网页的样式表。type属性用来表述外部资源的类型，而media属性用来描述样式表适合的媒体类型（完整的媒体类型参见\ref{CSSmedia}）。可以通过指定media的值，来为打印机、屏幕阅读器、投影仪、电视机、手机等不同的上网设备分别指定适合的样式表，这也体现了CSS的强大之处。

也可以在多种媒体中使用同一个样式表，只需要在media属性中以列出多种媒体名称，各个媒体名称之间用“，”隔开。例如：

\begin{lstlisting}
<link href="global_v1.5.1.css" rel="stylesheet"  type="text/css" media="screen, projection"/>
\end{lstlisting}

以上代码的意思是使用global\_v1.5.1.css作为文档在计算机屏幕和投影仪上显示时的样式表。

\subsection{内部样式表} % (fold)
\label{sub:内部样式表}
除了使用link元素链接外部样式表之外，CSS还可以使用style元素将样式信息同网页结合起来,这种方式的样式表叫做内部样式表。

style元素可以直接在页面中嵌入CSS样式信息，而不用将它们单独作为外部样式表保存，因此并不符合内容和表现分离的Web标准。内部样式表在页面不多时比较方便，因为样式信息被存放在网页内部，当页面数量增加后，一旦修改，就要分别修改网页内容，这不但效率低下，而且还存在潜在的不一致风险。

但如果我们就想基于全站的样式针对某个特定页面进行微调，那么使用style元素标记内部样式表则是不错的选择。内部样式表也需要在head元素中使用，例如：

\begin{lstlisting}
<head>
<style type="text/css" media="screen">
……
</style>
</head>
\end{lstlisting}

\subsection{内嵌样式表} % (fold)
\label{sub:内嵌样式表}
除了外部样式表和内部样式表之外，CSS还提供了一种叫做内嵌样式表的机制。内嵌样式表是在具体的需要添加样式的元素中使用style属性。使用内嵌样式表的场合并不多见，因为同外部样式表和内部样式表相比，内嵌样式表更加不易修改。内嵌样式表的例子如下：

\begin{lstlisting}
<div style="font-size:38px">加入微博，记录点滴</div>
\end{lstlisting}
